<!--
@WAIT-FOR:Kettle
-->
<!DOCTYPE html>
<!-- saved from url=(0072)https://design-systems.pages.booking.com/dev-tools/component-viewer/#bui -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>
<body>
    <div>
        <button>
	<span class="icon">
	  <svg class="" data-width="24" data-icon-name="kettle" viewBox="0 0 24 24" role="presentation">
            <defs>
              <style>.cls-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}</style>
            </defs>
	  </svg> <!-- svg -->
	</span>
	<span class="label"></span>
</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
        // Make sure that nothing inside of an SVG element is exposed.
        const circle = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
        document.querySelector('style').appendChild(circle);
        const foreignObject = document.createElementNS("http://www.w3.org/2000/svg", 'foreignObject');
        document.querySelector('style').appendChild(foreignObject);
        const input = document.createElementNS("http://www.w3.org/1999/xhtml", 'input');
        foreignObject.appendChild(input);
        document.querySelector('.label').innerText = 'Kettle';
    }, 300);
});
</script>
</body>
</html>
